/*	Datatrain Amber CSS theme by studio tomodashi/@vga256 
	colour palette:
		dark: #201000;
		dark-amber: #332000;
		
		low-amber: orange;
		mid-amber: #ff7f00;
		bright-amber: #ffbf00;
		brightest-amber: #ffdf00;
*/


@font-face
{
	font-family: Paradise_Hi-Res;
	src: url(fonts/paradise132_7x16.ttf); /* aspect-ratio corrected */
	font-weight: normal;
	font-style: normal;
}

@font-face 
{
	font-family: Cordata_PPC;
	src: url(fonts/cordata_ppc_21.ttf); /* aspect-ratio corrected */
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: AmstradPCW-Narrow;
	src: url(fonts/amstrad-pcw-narrow.ttf); /* aspect-ratio corrected */
	font-weight: normal;
	font-style: normal;
}

/* define HTML5 block level elements */
header, nav, footer, article, section { display: block; }

/* layout */
html, body 
{
	font-family: Cordata_PPC !important;
	font-size: 32px !important;
	background-color: #201000 !important; /* dark brown */
	margin: 0 0 0 0;
	font-smooth: antialiased;
	-webkit-font-smoothing: antialiased;
}

html:before
{
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(
        to bottom,
        rgba(32, 16, 0, 0) 35%,
        rgba(0, 0, 0, 0.9) 90%
    );
    background-size: 100% 2px;
    z-index: 2;
    pointer-events: none;
}

html { margin: 0; padding: 0; }
body { margin-top:2%; width: 100%; color: #ff7f00; background-color: #201000;}

/* general form styles */
.action_button, .submitsettings, .mail_button_link, .mail_button_read
{
	line-height: 1em;
    align-items: normal;
	background: none;
    background-color: orange;
    border-style: none;
	border: 0;
	box-shadow: none;
	box-sizing: content-box;
	color: #201000;
	padding: 0;
	margin: 0;
	padding-left: 0.2em;
	padding-right: 0.2em;
    cursor: pointer;
    display: block;
    font: inherit;
    perspective-origin: 0 0;
    text-align: start;
	text-shadow: none;
    transform-origin: 0 0;
    -moz-appearance: none;
    -webkit-logical-height: auto;
    -webkit-logical-width: auto;
	-webkit-border-radius: 0;
	border-radius: 0;
	text-transform: uppercase;
	overflow-x: auto;
	text-overflow: ellipsis;
}

.mail_button_link, .mail_button_read { text-transform: none;}

.action_button:hover, .submitsettings:hover { background-color: #ffdf00;}
.action_button:active, .submitsettings:active { background-color: #ffdf00; }

/* colors and typography */
body > div#container > div#terminal_frame { overflow: hidden; position: fixed; z-index: 1; border: solid 0.2em orange; border-top: none; width: 95%; height: 95%; top: 2.5%; bottom: 2.5%; left: 2.5%; right: 2.5%;}
body > div#container > div#terminal_frame > div#terminal_inner_content { pointer-events: none; } /* annoying hack: have to have a container inside the frame that the bottom navactions and content use it as a parent for positioning */
body > div#container > div#terminal_frame > div#terminal_inner_content > * { pointer-events: auto; z-index: 0; max-height: 90vh;}
body > div#container > div#terminal_frame > div#terminal_inner_content > div#header { position: sticky; display:block; padding: 0; width: 100%; height: auto; }
body > div#container > div#terminal_frame > div#terminal_inner_content > div#header > #title {display:block; background-color: orange; color: #201000; line-height: 1em; margin-top: 0px; text-align: center;}
body > div#container > div#terminal_frame > div#terminal_inner_content > div#header a { text-decoration: none;}
body > div#container > div#terminal_frame > div#terminal_inner_content > div#header > div#nav_places {display: block; float: right; color: #201000;}
body > div#container > div#terminal_frame > div#terminal_inner_content > div#header > div#nav_places a { display: inline-block; padding-left: 0.25em; padding-right: 0.25em; border-left: 2px solid #201000; }

body > div#container > div#terminal_frame > div#terminal_inner_content > div#header > div#breadcrumbs { overflow: hidden; display: block; clear: both; }
body > div#container > div#terminal_frame > div#terminal_inner_content > div#header > div#breadcrumbs span.selector { color: #ffdf00}

body > div#container > div#terminal_frame > div#terminal_inner_content > div#content > div#actions { position: absolute; bottom: 0; width: 100%; }
body > div#container > div#terminal_frame > div#terminal_inner_content > div#content > div#actions > div#context_actions { float: right; margin: 0; padding: 0em 0.5em; display: flex;}
body > div#container > div#terminal_frame > div#terminal_inner_content > div#content > div#actions > div#context_actions > div.context_action { border-left: solid 2px #201000; text-align: center; overflow-x: auto; text-overflow:ellipsis;}

/* dialog boxes */
div.dialog_box { border: solid 2px #ff7f00; margin: auto; height: auto; width: 8em; padding: 1em; margin-left: auto; margin-right: auto;}
div.dialog_button > input.submitsettings { margin-top:0.5em; margin-left: auto; margin-right: auto;}

body > footer { margin: 1em 0; padding: 0; text-align: center; color: #ff7f00; }
body > footer a { color: inherit; text-decoration: none; }
body > footer a:hover { text-decoration: underline; }

/* general content styles */
body > h2 { margin: 1em 0 0 0; padding: 0; border-bottom: 1px solid #ccc; }
body a { background-color: orange; color: #201000; text-decoration: none; }
body a:hover { 	color: #201000; background-color: #ffdf00;text-decoration: none;}
body a:active { background-color: #ffdf00; }

.column_header { color: #ffdf00; }

code {  }

form { margin: 0; width: auto;}

form > button
{
	display:inline-block;
	line-height: 1em;
	border-right: 2px solid #201000;
	border-bottom: 1px solid #201000;
	background-color: orange;
	padding: 0;
	text-overflow: ellipsis;
}
form > button:active { background-color: #ffdf00; }
form > button:hover { background-color: #ffdf00;}

form > .notice, form > .error { margin: 0.5em 0; }
form > .notice > h3, form > .error > h3 { margin: 0 0 0.5em 0; }
form > .notice > p, form > .error > p { margin: 0.5em 0 0 0; }

form > ul.error {  list-style: none;  }
form > ul.error > li { margin: 0.25em 0 0 0; padding: 0; }
form > ul.error > li:first-child { margin-top: 0; }
textarea#message_body, textarea.postbody { width: 100%; min-height: 2em; height: 40%;}

form { padding: 0; background-color: #201000;}
textarea, input[type=text], input[type=password] { background-color: #201000 !important; font-family: Cordata_PPC !important; font-size: 32px !important; color: #ffbf00; border: solid 2px #ffbf00 !important; caret-color: #ffdf00 !important;}

/* hide stuff that is shown later by JavaScript */
form.message > ul.error, form.message > #message-post-error, form.message > #message-accepted, form.message > article#post-preview { display: none; }

/* action link list for main content */
body > ul.actions {  }
body > ul.actions > li.new.topic { float: left; }
body > ul.actions > li.all.read { float: right; font-size: 1em; }
body > ul.actions.above { }
body > ul.actions.below { border-top: 1px solid #ccc; }

div.actions { height: 1em; }
div.actions > div { }
div.actions > div.new.topic > a {  }
div.actions div.new.message {  float: left;}
div.actions div.delete.message {  }
div.actions > div.all.read > a { padding-top: 1px; padding-bottom: 1px; }

/* admin menu */
div.admin_container { height: 90%; width: 100%; overflow-y: auto; display: block; }
div.admin_table { text-align: center; display: table; table-layout:fixed; float:left;}
div.adminactions { position: absolute; text-align: center; display: flex; align-items:center; justify-content: space-around; width: 100%; bottom: 0;}
div.admin_table > div.admin_row { display: table-row; clear: both;}
div.admin_table > div.admin_row > * { display: table-cell; text-align: center; width: auto; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; max-width: 100%;}
div.admin_table > div.admin_row > div.admin_header { color: #ffdf00; }
div.admin_row:nth-child(even) { background-color: #332000;}
div.adminactions > div.adminaction { border-left: solid 2px #201000; text-align: center; overflow-x: auto; text-overflow:ellipsis;}


/**
 * Page specific styles
 */

/* styles shared by newsgroup and topic list */
table { font-size: 1em; width: 100%; margin: 1em 0; padding: 0; border-spacing: 0; }
table.admin > thead { text-align: left;}
table > thead > tr > th { font-weight: normal; }
table.admin > thead > tr > th:nth-child(1) { width: 5em; }
table.admin > thead > tr > th:nth-child(2) { width: 5em; }
table.admin > thead > tr > th:nth-child(3) { width: 10em;}
table.admin > thead > tr > th:nth-child(4) { width: 20em;}
table.admin > thead > tr > th.heading { font-size: 2em; font-weight: normal; text-align: center;}
table > tbody > tr:nth-child(odd) > td { background: hsla(0, 0%, 50%, 0.1); }
table > tbody > tr > td { padding: 0.25em 0.5em; margin: 0; }
table > tbody > tr > td.empty { padding: 2em; text-align: center; color: inherit; }

/* groups summary on tomo index page */
div.groups_summary { text-align: center; display: table; table-layout:fixed; width: 100%; }
div.groups_row { display: table-row; clear: both;}
div.groups_row:nth-child(even) { background-color: #332000;}
div.groups_summary > div.groups_row > * { display: table-cell; text-align: center; width: auto; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; max-width: 100%;}
div.groups_summary > div.groups_row > div.groups_header { color: #ffdf00; }

/* mail page */
div.mailbox_container { padding: 0; padding-left: 0.2em; height: 4em; overflow-y: auto; display: inline-block; border-bottom: solid 0.2em orange; }
div.mail_summary { text-align: center; display: table; table-layout:fixed; width: 100%; }
div.mail_row {display: table-row; clear: both;}
div.mail_row:nth-child(even) { background-color: #332000;}
div.mail_summary > div.mail_row > * { border-bottom: solid 2px #201000; display: table-cell; text-align: center; width: auto; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; max-width: 100%; }
div.mail_summary > div.mail_row > span.mail_header { background-color: #201000; top:0; color: #ffdf00; position: sticky; }
div.mail_summary > div.mail_row > form { text-align:left; background-color: transparent; ;}
div.mail_summary > div.mail_row > form > button { display: table-cell; overflow-x: hidden; text-overflow: ellipsis; white-space:nowrap; max-width: 100%;}

div.message_container { top:0; height: 75%;  width: 100%; display: inline-block; align-content: flex-start; overflow-y: auto; padding: 0.5em; }
div.message_header {  }
div.message_header > .message_field { color: #ffdf00;}
div.message_header > .message_field > span { color: #ff7f00;}

div.mail_new_message { height: 90%; padding: 0.2em; }

/* messages */
div.messages { height: 85%; overflow-y: auto; width: 100%;}
div.messages form.message { margin: 0 -0.5em -0.5em -0.5em; padding: 0 0.5em 0 0.5em; background: hsl(0, 0%, 90%); }
div.messages form.message > section.help { margin-top: 0; }



/* topic list */
body.topics > table > tbody > tr > td:nth-child(2) { font-size: 1em; width: 5em; text-align: center; }
body.topics > table > tbody > tr > td:nth-child(3) { font-size: 1em; width: 17.5em; }
body.topics > table > tbody > tr > td:nth-child(3) > abbr::after { content: '\a'; white-space: pre; }

/* the ":link" removes the unread highlight when the user uses the back button to get back to the topic overview */
body.topics > table > tbody > tr.unread > td:nth-child(1) > a:link { padding-left: 20px; color: hsl(202, 56%, 25%); }
/* chrome has trouble with the :link class… do some extra reseting for chrome */
body.topics > table > tbody > tr.unread > td:nth-child(1) > a:visited { padding-left: 0; background: none; }

body.topics form.message { margin: 1em 0; padding: 1px 0.5em; border: 1em solid rgba(0, 0, 0, 0.5); border-radius: 1em; background: hsla(0, 0%, 50%, 0.1); }

body.topics form.message {
	-moz-border-radius: 1em;
	-webkit-border-radius: 1em; }

/* Hide stuff that is shown by JavaScript later on */
body.topics > ul.actions > li > a.new.topic, body.topics > form.message { display: none; }


/* subscriptions */
body.subscriptions > ul { margin: 1em 0; padding: 0; list-style: none; }
body.subscriptions > ul > li { margin: 1em 0; padding: 0; }
body.subscriptions > ul > li > small { display: block; }
body.subscriptions > ul > li > small > a:not(:hover):not(:focus):not(:active) { color: inherit; }

body.subscriptions ul.actions { display: inline; margin: 0 0 0 3em; padding: 0; list-style: none; font-size: 1em; }
body.subscriptions ul.actions li { display: inline; }

body.subscriptions p.empty { margin: 2em; text-align: center; color: gray; }


/* post styles */
article { margin: 0; padding: 0.5em; height: auto; margin-bottom: 0.5em;}
article > header { margin: -0.5em -0.5em 0 -0.5em; padding: 0.25em 0.5em; color: #ffdf00;  border-radius: 5px 5px 0 0; }
article > header p { overflow: hidden; font-size: 1em; margin: 0; padding: 0; }
article > header a {  }
article > header p a.permalink { float: right; }
article > *:nth-child(2) { margin-top: 0.5em; }
article > *:last-child { margin-bottom: 0; }

article.unread > header { background: hsl(347, 100%, 40%); }
article.unread > header p { padding-left: 20px; }

article > p.empty { margin: 1em; text-align: center; color: gray; }

article > ul.attachments { margin: 0 -0.5em 0 -0.5em; padding: 0.5em 0.5em 0.5em 30px; border-bottom: 1px solid #ddd; list-style: none; }
article > ul.attachments > li { display: inline; margin: 0 0.5em 0 0; padding: 0; }

article > ul.attachments > li.thumbnail { display: inline-block; min-height: 100px; background-repeat: no-repeat; background-position: left center; padding-left: 105px; }
article > ul.attachments > li.thumbnail > a { display: block; padding-top: 30px; }

article div.actions { }
article div.actions { display: block; margin-right: 1em; }
article div.actions > div.delete.message, article > div.actions > div.subscription { display: inline; float: right; font-size: 1em; }
article div.actions > div.delete.message { height: 1em; margin-right: 0; }

article hr { margin: 0.5em 0; padding: 1px 0 0 0; border: none; background: hsl(0, 0%, 70%); }

article blockquote { margin: 1em 0; padding: 0 0.5em; color: hsl(120, 100%, 25%); border-left: 2px solid hsl(120, 100%, 25%); }
article blockquote blockquote { color: hsl(190, 100%, 25%); border-color: hsl(190, 100%, 25%); }
article blockquote blockquote blockquote { color: hsl(260, 100%, 25%); border-color: hsl(260, 100%, 25%); }
article blockquote blockquote blockquote blockquote { color: hsl(330, 100%, 25%); border-color: hsl(330, 100%, 25%); }

article > p.quote-dropdown { cursor: pointer; padding-left: 16px; font-size: 1em; }
article > p.quote-dropdown:hover { color: hsl(202, 56%, 36%); text-decoration: underline; }
article > p.quote-dropdown.collapsed {  }
article > p.quote-dropdown.collapsed:after { content: ' …'; }
article > p.quote-dropdown.collapsed + blockquote{ display: none; }

article { background-color: #332000;}
article > header { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; }


/* delete confirmation dialog */
article { position: relative; }
article > div.confirmation { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); border-radius: 5px; }
article > div.confirmation > form { position: absolute; width: 15em; margin: 0 auto; padding: 0.5em; text-align: center; color: #333; background: hsl(0, 0%, 90%); border-radius: 5px; }
article > div.confirmation > form > p { margin: 0; padding: 0; }
article > div.confirmation > form > p + p { margin: 0.5em 0 0 0; padding: 0; }
article > div.confirmation > form button { margin: 0 2em; }
article > div.confirmation > form button + button { font-weight: bold; }

article > div.confirmation, article > div.confirmation > form { -moz-border-radius: 5px; -webkit-border-radius: 5px; }

/* message list styles */
div.messages > ul { margin: 0; padding: 0; list-style: none; }
div.messages > ul > li { margin: 1em 0; padding: 0; }

div.messages > ul > li article + ul { margin: 0.5em 0; padding: 0.5em 0 0 0.5em; list-style: none; border-left: 1px dashed gray; }
div.messages > ul > li article + ul > li { margin: 1em 0 0 0; padding: 0; }
div.messages > ul > li article + ul > li:nth-child(2) { margin-top: 0; }  /* first child is the reply dropdown */

div.messages > ul > li > ul { border-color: hsl(120, 100%, 25%); }
div.messages > ul > li > ul > li > ul { border-color: hsl(190, 100%, 25%); }
div.messages > ul > li > ul > li > ul > li > ul { border-color: hsl(260, 100%, 25%); }
div.messages > ul > li > ul > li > ul > li > ul > li > ul { border-color: hsl(330, 100%, 25%); }
div.messages > ul > li > ul > li > ul > li > ul > li > ul > li > ul { border-color: hsl(40, 100%, 25%); }
div.messages > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul { border-color: hsl(110, 100%, 25%); }
div.messages > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > ul { border-color: hsl(180, 100%, 25%); }

div.messages article + ul { position: relative; }
div.messages article + ul > li.reply-dropdown { text-indent: -10000px; position: absolute; top: -0.5em; left: -8px; margin: 0; padding: 14 0 0 14px; cursor: pointer; font-size: 1em; }

div.messages article + ul.collapsed { margin: 0.5em 0; padding: 0; }
div.messages article + ul.collapsed > li.reply-dropdown { text-indent: 0; position: static; margin: 0.5em 0 0.5em -8px; }
div.messages article + ul.collapsed > li.reply-dropdown:hover { color: hsl(202, 56%, 36%); text-decoration: underline; }
div.messages ul.collapsed > li:not(.reply-dropdown) { display: none; }

body > footer > span { text-size: 2em;}

::-webkit-scrollbar-thumb:hover
{
	cursor: pointer;
}

::-webkit-scrollbar 
{
	width: 0.5em;
}

::-webkit-scrollbar-track
{
	width: 0.5em;
	background-color: orange;
}

::-webkit-scrollbar-thumb 
{
	width: 0.5em;	
	background-color: #ffd200;
}